<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧超市管理系统 - API文档</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            margin: 0;
            padding: 0;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px 20px;
        }
        
        .header {
            text-align: center;
            color: white;
            margin-bottom: 40px;
        }
        
        .header h1 {
            font-size: 3em;
            margin: 0;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }
        
        .header p {
            font-size: 1.2em;
            margin: 10px 0;
            opacity: 0.9;
        }
        
        .api-groups {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 40px;
        }
        
        .api-group {
            background: white;
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            cursor: pointer;
        }
        
        .api-group:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(0,0,0,0.3);
        }
        
        .api-group h3 {
            color: #333;
            margin: 0 0 15px 0;
            font-size: 1.4em;
            display: flex;
            align-items: center;
        }
        
        .api-group .icon {
            font-size: 1.5em;
            margin-right: 10px;
        }
        
        .api-group p {
            color: #666;
            margin: 0;
            line-height: 1.6;
        }
        
        .api-group .status {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.8em;
            font-weight: bold;
            margin-top: 10px;
        }
        
        .status.ready {
            background: #e8f5e8;
            color: #2e7d32;
        }
        
        .status.developing {
            background: #fff3e0;
            color: #f57c00;
        }
        
        .status.planned {
            background: #f3e5f5;
            color: #7b1fa2;
        }
        
        .quick-start {
            background: white;
            border-radius: 15px;
            padding: 30px;
            margin-top: 40px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        }
        
        .quick-start h2 {
            color: #333;
            margin: 0 0 20px 0;
            text-align: center;
        }
        
        .quick-links {
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
        }
        
        .quick-link {
            display: inline-block;
            padding: 12px 24px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            text-decoration: none;
            border-radius: 25px;
            font-weight: bold;
            transition: transform 0.3s ease;
        }
        
        .quick-link:hover {
            transform: scale(1.05);
            text-decoration: none;
            color: white;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🏪 智慧超市管理系统</h1>
            <p>Smart Supermarket Management System</p>
            <p>现代化的超市管理解决方案 - RESTful API 文档</p>
        </div>
        
        <div class="api-groups">
            <div class="api-group" onclick="openApiGroup('01-用户认证')">
                <h3><span class="icon">🔐</span>用户认证</h3>
                <p>用户登录、注册、权限验证等认证相关功能</p>
                <span class="status ready">已完成</span>
            </div>
            
            <div class="api-group" onclick="openApiGroup('02-系统管理')">
                <h3><span class="icon">⚙️</span>系统管理</h3>
                <p>用户管理、角色管理、权限管理等系统功能</p>
                <span class="status developing">开发中</span>
            </div>
            
            <div class="api-group" onclick="openApiGroup('03-商品管理')">
                <h3><span class="icon">📦</span>商品管理</h3>
                <p>商品信息、分类管理、供应商管理等功能</p>
                <span class="status planned">计划中</span>
            </div>
            
            <div class="api-group" onclick="openApiGroup('04-库存管理')">
                <h3><span class="icon">📊</span>库存管理</h3>
                <p>库存查询、入库出库、库存盘点等功能</p>
                <span class="status planned">计划中</span>
            </div>
            
            <div class="api-group" onclick="openApiGroup('05-采购管理')">
                <h3><span class="icon">🛒</span>采购管理</h3>
                <p>采购计划、采购订单、供应商管理等功能</p>
                <span class="status planned">计划中</span>
            </div>
            
            <div class="api-group" onclick="openApiGroup('06-销售管理')">
                <h3><span class="icon">💰</span>销售管理</h3>
                <p>收银管理、会员管理、销售统计等功能</p>
                <span class="status planned">计划中</span>
            </div>
            
            <div class="api-group" onclick="openApiGroup('07-财务管理')">
                <h3><span class="icon">💼</span>财务管理</h3>
                <p>收支管理、财务报表、成本分析等功能</p>
                <span class="status planned">计划中</span>
            </div>
            
            <div class="api-group" onclick="openApiGroup('08-报表统计')">
                <h3><span class="icon">📈</span>报表统计</h3>
                <p>销售报表、库存报表、数据分析等功能</p>
                <span class="status planned">计划中</span>
            </div>
        </div>
        
        <div class="quick-start">
            <h2>🚀 快速开始</h2>
            <div class="quick-links">
                <a href="/doc.html#/01-用户认证" class="quick-link">开始测试认证接口</a>
                <a href="/doc.html#/99-测试接口" class="quick-link">查看测试接口</a>
                <a href="/swagger-ui/index.html" class="quick-link">原生Swagger UI</a>
            </div>
        </div>
    </div>
    
    <script>
        function openApiGroup(groupName) {
            window.location.href = '/doc.html#/' + encodeURIComponent(groupName);
        }
    </script>
</body>
</html>